<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情-三页</title>
    <!-- 引入公共样式  -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入轮播插件 -->
    <link rel="stylesheet" href="./css/magnifier.css">
    <!-- 引入当前文件样式  -->
    <link rel="stylesheet" href="./css/mymagnifier.css">

</head>

<body>
    <!--网页头部 -->
    <header>
        <!-- 头部导航栏 -->
        <div class="top-nav">
            <div class="welcome container clearfix">
                <span class="fr">欢迎光临<a href="#">乐购</a>，请先 <a href="./record.html">登录</a>\<a href="#">注册</a></span>
            </div>
        </div>

        <div class="nav container clearfix">
            <div class="img fl">
                <!-- logo图 -->
                <img src="./img/logo.jpg" alt="">
            </div>

            <div class="box fr">
                <!-- 搜索框 -->
                <div class="clearfix">
                    <form action="#" class="form">
                        <input class="inp" type="text" placeholder="创意文具">
                        <button class="btn" type="submit">搜索</button>
                    </form>

                    <div class="cart">
                        <a href="./shopping.html" class="right-shop fr">
                            <span class="shop"><i></i>购物车 3</span>
                            <span class="order">我的订单</span>
                        </a>
                        <div class="side fr">
                            <a href="./index.html">首页</a>
                            <a href="./Product.html">商品列表</a>
                            <a href="./details3.html">产品详情</a>
                            <a href="./shopping.html">购物车</a>
                            <a href="./record.html">登录</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                        </div>
                    </div>
                </div>

                <!-- 导航列表 -->
                <div>

                </div>
            </div>
        </div>

    </header>

    <!-- 网页主体 -->
    <tbody class="container">
        <!-- 放大镜 -->

        <div class="mymagnifier container clearfix">

            <div class="mymagnifier-top">
                <!-- 头部 -->
                <div class="mymagnifier-title">
                        图书<span class="tushu"> &gt; 小说 &gt; 情感/家庭/婚姻 &gt; 博集天卷 &gt; 她和他</span>
                </div>
            </div>

            <!-- 左边 -->
            <div class="mymagnifier-left fl">
                <!-- 放大镜 -->
                <div class="magnifier" id="magnifier1">
                    <div class="magnifier-container" id="magnifier-container">
                        <div class="images-cover"></div>
                        <!--当前图片显示容器-->
                        <div class="move-view"></div>
                        <!--跟随鼠标移动的盒子-->
                    </div>
                    <div class="magnifier-assembly">
                        <div class="magnifier-btn">
                            <span class="magnifier-btn-left">&lt;</span>
                            <span class="magnifier-btn-right">&gt;</span>
                        </div>
                        <!--按钮组-->
                        <div class="magnifier-line">
                            <ul class="clearfix animation03">
                                <li>
                                    <div class="small-img">
                                        <img src="./img/23418061-1_l.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./img/22616096-1_l.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./img/22876893-1_l.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./img/22854283-1_l.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./img/23579654-1_l.jpg" />
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--缩略图-->
                    </div>
                    <div class="magnifier-view"></div>
                    <!--经过放大的图片显示容器-->
                </div>
            </div>

            <!-- 右边 -->
            <div class="mymagnifier-right fr">
                <h5>他和她</h5>
                <p class="mymagnifier-one">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                <span>[法] 马克·李维 著；杨亦雨 译</span>
                <div class="mymagnifier-two">
                    <p>乐购价<span class="mymagnifier-three">"￥26.20</span> [6.9折] [定价：<span class="mymagnifier-fore">￥38.00</span>] (降价通知)</p>
                    <p>促销信息：满减 每满150.00元，可减50.00元现金   详情 &gt;&gt;</p>
                    <a>领券:<img src="./img/03-youhuiquan.jpg" alt=""></a>
                </div>
                <div class="mymagnifier-five">
                    种类选择:<a><img src="./img/03-xuanze_03.jpg" alt=""></a>
                </div>
                <!-- 商城商品数量加减 -->
                <div id="box">
                    <input class="num" type="text" value="1">
                    <span class="add">+</span>
                    <span class="reduce">-</span>
                    <p class="box-car">加入购物车</p>
                </div>
                <p class="mymagnifier-six">温馨提示：支持七天无理由退货</p>
            </div>
        </div>

        <!-- 中间内容 -->
        <div class="mymagnifier-center container">
            <div class="center-top">
                <h2>人气品单</h2>
            </div>

            <div class="center-bottom clearfix">
                
                <li class="center-li fl">
                    <img src="./img/22935553-1_l.jpg" alt="">
                    <img src="./img/03-bazhe_03.jpg" alt="">
                    <h5>白夜行  东野上吾</h5>
                    <img src="./img/03-tuijian_03.jpg" alt="">
                    <p class="sprice">￥38<span>￥58</span></p>
                </li>
                <li class="center-li fl">
                    <img src="./img/22935553-1_l.jpg" alt="">
                    <img src="./img/03-bazhe_03.jpg" alt="">
                    <h5>白夜行  东野上吾</h5>
                    <img src="./img/03-tuijian_03.jpg" alt="">
                    <p class="sprice">￥38<span>￥58</span></p>
                </li>
                <li class="center-li fl">
                    <img src="./img/22935553-1_l.jpg" alt="">
                    <img src="./img/03-bazhe_03.jpg" alt="">
                    <h5>白夜行  东野上吾</h5>
                    <img src="./img/03-tuijian_03.jpg" alt="">
                    <p class="sprice">￥38<span>￥58</span></p>
                </li>
                <li class="center-li fl">
                    <img src="./img/22935553-1_l.jpg" alt="">
                    <img src="./img/03-bazhe_03.jpg" alt="">
                    <h5>白夜行  东野上吾</h5>
                    <img src="./img/03-tuijian_03.jpg" alt="">
                    <p class="sprice">￥38<span>￥58</span></p>
                </li>
                <li class="center-li fl">
                    <img src="./img/22935553-1_l.jpg" alt="">
                    <img src="./img/03-bazhe_03.jpg" alt="">
                    <h5>白夜行  东野上吾</h5>
                    <img src="./img/03-tuijian_03.jpg" alt="">
                    <p class="sprice">￥38<span>￥58</span></p>
                </li>
            
            </div>
        </div>

        <!-- 底部内容 -->
        <div class="mymagnifier-bottom container clearfix">
            <!-- 左边 -->
            <div class="bottom-left fl">
                <div class="left-top">
                    <p>看了又看</p>
                </div>

                <div class="left-bottom">
                    <li class="bottom-li fl">
                        <img src="./img/22935553-1_l.jpg" alt="">
                        <img src="./img/03-bazhe_03.jpg" alt="">
                        <h5>白夜行  东野上吾</h5>
                        <img src="./img/03-tuijian_03.jpg" alt="">
                        <p class="sprice">￥38<span>￥58</span></p>
                    </li>
                    <li class="bottom-li fl">
                        <img src="./img/22935553-1_l.jpg" alt="">
                        <img src="./img/03-bazhe_03.jpg" alt="">
                        <h5>白夜行  东野上吾</h5>
                        <img src="./img/03-tuijian_03.jpg" alt="">
                        <p class="sprice">￥38<span>￥58</span></p>
                    </li>
                    <li class="bottom-li fl">
                        <img src="./img/22935553-1_l.jpg" alt="">
                        <img src="./img/03-bazhe_03.jpg" alt="">
                        <h5>白夜行  东野上吾</h5>
                        <img src="./img/03-tuijian_03.jpg" alt="">
                        <p class="sprice">￥38<span>￥58</span></p>
                    </li>
                    <li class="bottom-li fl">
                        <img src="./img/22935553-1_l.jpg" alt="">
                        <img src="./img/03-bazhe_03.jpg" alt="">
                        <h5>白夜行  东野上吾</h5>
                        <img src="./img/03-tuijian_03.jpg" alt="">
                        <p class="sprice">￥38<span>￥58</span></p>
                    </li>
                    
                </div>

            </div>

            <!-- 右边 -->
            <div class="bottom-right fr">
                
                <ul class="right-bottom">
                    <li class="fl bottomul active">商品介绍</li>
                    <li class="fl bottomli">评论（9999）</li>
                </ul>

                <div class="right-top">
                    <!-- 一页 -->
                    <ul class="top-one on">
                        <li class="top-left">
                            <ul class="top-six clearfix">
                                <!-- 左 -->
                                <li class="num fl">
                                    <p>98%</p>
                                    <span class="haopin fl">好评度</span>
                                </li>
                                <!-- 中 -->
                                <li class="percentage fl">
                                    <img src="./img/03-564_06.jpg" alt="">
                                </li>
                                <!-- 右 -->
                                <li class="data fr">
                                    <p>1.周**子&emsp;&emsp; +0 &emsp;&emsp;周**子&emsp;&emsp;+0 &emsp;</p>
                                    <p>1.周**子&emsp;&emsp; +0 &emsp;&emsp;周**子&emsp;&emsp;+0 &emsp;</p>
                                </li>
                            </ul>
                        </li>
                        <li class="top-bottm">
                            <p>全部评价（9999）&emsp;&emsp;&emsp;好评（888）&emsp;&emsp;&emsp;好评（888）&emsp;&emsp;&emsp;差评（888）</p>
                        </li>

                        <li class="comment clearfix">
                            <div class="comment-left fl">
                                <img src="./img/03-wukexingxing_07.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="comment-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                                        键是价格真给力</p>
                            </div>
                            <div  class="comment-right fl">
                                <p><img src="./img/03-touxiang_03.jpg" alt="">洲**子</p>
                                <p class="king">金牌会员</p>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="comment clearfix">
                            <div class="comment-left fl">
                                <img src="./img/03-wukexingxing_07.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="comment-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                                        键是价格真给力</p>
                            </div>
                            <div  class="comment-right fl">
                                <p><img src="./img/03-touxiang_03.jpg" alt="">洲**子</p>
                                <p class="king">金牌会员</p>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="comment clearfix">
                            <div class="comment-left fl">
                                <img src="./img/03-wukexingxing_07.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="comment-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                                        键是价格真给力</p>
                            </div>
                            <div  class="comment-right fl">
                                <p><img src="./img/03-touxiang_03.jpg" alt="">洲**子</p>
                                <p class="king">金牌会员</p>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="comment clearfix">
                            <div class="comment-left fl">
                                <img src="./img/03-wukexingxing_07.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="comment-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                                        键是价格真给力</p>
                            </div>
                            <div  class="comment-right fl">
                                <p><img src="./img/03-touxiang_03.jpg" alt="">洲**子</p>
                                <p class="king">金牌会员</p>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="comment clearfix">
                            <div class="comment-left fl">
                                <img src="./img/03-wukexingxing_07.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="comment-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                                        键是价格真给力</p>
                            </div>
                            <div  class="comment-right fl">
                                <p><img src="./img/03-touxiang_03.jpg" alt="">洲**子</p>
                                <p class="king">金牌会员</p>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                    </ul>
                    <!-- 二页 -->
                    <ul class="top-one ">
                            <li class="top-left">
                                <ul class="top-six clearfix">
                                    <!-- 左 -->
                                    <li class="num fl">
                                        <p>96%</p>
                                        <span class="haopin fl">好评度</span>
                                    </li>
                                    <!-- 中 -->
                                    <li class="percentage fl">
                                        <img src="./img/03-564_06.jpg" alt="">
                                    </li>
                                    <!-- 右 -->
                                    <li class="data fr">
                                        <p>1.周**子&emsp;&emsp; +0 &emsp;&emsp;周**子&emsp;&emsp;+0 &emsp;</p>
                                        <p>1.周**子&emsp;&emsp; +0 &emsp;&emsp;周**子&emsp;&emsp;+0 &emsp;</p>
                                    </li>
                                </ul>
                            </li>
                            <li class="top-bottm">
                                <p>全部评价（9999）&emsp;&emsp;&emsp;好评（888）&emsp;&emsp;&emsp;好评（888）&emsp;&emsp;&emsp;差评（888）</p>
                            </li>
    
                            <li class="comment clearfix">
                                <div class="comment-left fl">
                                    <img src="./img/03-wukexingxing_07.jpg" alt="">
                                    <p>下单后5天评论</p>
                                    <span>2016-08-11</span>
                                </div>
                                <div class="comment-center fl">
                                    <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                                            键是价格真给力</p>
                                </div>
                                <div  class="comment-right fl">
                                    <p><img src="./img/03-touxiang_03.jpg" alt="">洲**子</p>
                                    <p class="king">金牌会员</p>
                                    <p>来自iPhone客户端</p>
                                </div>
                            </li>
                            <li class="comment clearfix">
                                <div class="comment-left fl">
                                    <img src="./img/03-wukexingxing_07.jpg" alt="">
                                    <p>下单后5天评论</p>
                                    <span>2016-08-11</span>
                                </div>
                                <div class="comment-center fl">
                                    <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                                            键是价格真给力</p>
                                </div>
                                <div  class="comment-right fl">
                                    <p><img src="./img/03-touxiang_03.jpg" alt="">洲**子</p>
                                    <p class="king">金牌会员</p>
                                    <p>来自iPhone客户端</p>
                                </div>
                            </li>
                            <li class="comment clearfix">
                                <div class="comment-left fl">
                                    <img src="./img/03-wukexingxing_07.jpg" alt="">
                                    <p>下单后5天评论</p>
                                    <span>2016-08-11</span>
                                </div>
                                <div class="comment-center fl">
                                    <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                                            键是价格真给力</p>
                                </div>
                                <div  class="comment-right fl">
                                    <p><img src="./img/03-touxiang_03.jpg" alt="">洲**子</p>
                                    <p class="king">金牌会员</p>
                                    <p>来自iPhone客户端</p>
                                </div>
                            </li>
                            <li class="comment clearfix">
                                <div class="comment-left fl">
                                    <img src="./img/03-wukexingxing_07.jpg" alt="">
                                    <p>下单后5天评论</p>
                                    <span>2016-08-11</span>
                                </div>
                                <div class="comment-center fl">
                                    <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                                            键是价格真给力</p>
                                </div>
                                <div  class="comment-right fl">
                                    <p><img src="./img/03-touxiang_03.jpg" alt="">洲**子</p>
                                    <p class="king">金牌会员</p>
                                    <p>来自iPhone客户端</p>
                                </div>
                            </li>
                            <li class="comment clearfix">
                                <div class="comment-left fl">
                                    <img src="./img/03-wukexingxing_07.jpg" alt="">
                                    <p>下单后5天评论</p>
                                    <span>2016-08-11</span>
                                </div>
                                <div class="comment-center fl">
                                    <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                                            键是价格真给力</p>
                                </div>
                                <div  class="comment-right fl">
                                    <p><img src="./img/03-touxiang_03.jpg" alt="">洲**子</p>
                                    <p class="king">金牌会员</p>
                                    <p>来自iPhone客户端</p>
                                </div>
                            </li>
                        </ul>
                  
                </div>

            </div>
             
            <!-- 页码 -->
            <ul class="page">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>...</li>
                <li>6</li>
                <li class="next">下一页</li>
            </ul>
        </div>



    </tbody>


    <!--网页尾部 -->
    <footer>
        <!-- 尾部导航 -->
        <div class="foot ">
            <div class="foot-nav container">
                <a href="#"><img src="./img/222_11.png" alt=""></a>
                <a href="#"><img src="./img/222_13(1).png" alt=""></a>
                <a href="#"><img src="./img/222_15.png" alt=""></a>
                <a href="#"><img src="./img/222_17.png" alt=""></a>
            </div>
        </div>

        <ul class="container clearfix">
            <li class="foot-links">
                <a href="" class="first-links">购物指南</a>
                <div class="links-aside">
                    <a href="">购物流程</a>
                    <a href="">发票制度</a>
                    <a href="">账户管理</a>
                    <a href="">会员优惠</a>
                </div>
            </li>
            <li class="foot-links">
                <a href="" class="first-links">购物指南</a>
                <div class="links-aside">
                    <a href="">购物流程</a>
                    <a href="">发票制度</a>
                    <a href="">账户管理</a>
                    <a href="">会员优惠</a>
                </div>
            </li>
            <li class="foot-links">
                <a href="" class="first-links">购物指南</a>
                <div class="links-aside">
                    <a href="">购物流程</a>
                    <a href="">发票制度</a>
                    <a href="">账户管理</a>
                    <a href="">会员优惠</a>
                </div>
            </li>
            <li class="foot-links">
                <a href="" class="first-links">购物指南</a>
                <div class="links-aside">
                    <a href="">购物流程</a>
                    <a href="">发票制度</a>
                    <a href="">账户管理</a>
                    <a href="">会员优惠</a>
                </div>
            </li>
            <li class="foot-links">
                <a href="" class="first-links">购物指南</a>
                <div class="links-aside">
                    <a href="">购物流程</a>
                    <a href="">发票制度</a>
                    <a href="">账户管理</a>
                    <a href="">会员优惠</a>
                </div>
            </li>
            <li class="foot-img fr">
                <img src="./img/logo_00.png" alt="">
            </li>
        </ul>

        <!-- 公司简介 -->
        <div class="introduce container">
            <span>公司简介：</span>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
        </div>

        <!-- 网站页脚 -->
        <div class="footer-tips container">
            <p>Page Mode shows headers, footers, footnotes and page numbers. </p>
        </div>
    </footer>

    <!-- 引入当前文件的js -->
    
    <script src="./lib/jquery.min.js"></script>
    <script src="./js/index2.js"></script>
    <script src="./lib/jquery.slidebox.js"></script>
     <!-- 放大镜 -->
     <script src="./js/magnifier(1).js"></script>
    <!-- 公共样式 -->
    <script src="./js/common.js"></script>
    <script src="./js/details3.js"></script>
   
</body>

</html>